<template>
  <div>
    <!-- 数据表格 -->
    <el-row type="flex" justify="end">
      <el-button type="primary" title="导出" size="small" @click="handelFileDownload">导出</el-button>
    </el-row>

    <!-- 数据表格 -->
    <el-row>
      <el-table
        :key="tableKey"
        v-loading="loading"
        :data="dataList"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%; margin-top:10px;"
        border
      >
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="workNumber" label="工号" width="100" />
        <el-table-column prop="mobile" label="手机号" width="200" />
        <el-table-column prop="department" label="部门" width="200" />
        <el-table-column prop="leaveDays" label="事假" width="100" />
        <el-table-column prop="dayOffLeaveDays" label="调休" width="100" />
        <el-table-column prop="normalDays" label="正常" width="100" />
        <el-table-column prop="laterTimes" label="迟到次数" width="100" />
        <el-table-column prop="earlyTimes" label="早退次数" width="100" />
        <el-table-column prop="averageDailyNaturalDays" label="日均时长" width="150" />
        <el-table-column prop="absenceDays" label="旷工天数" width="100" />
        <el-table-column prop="whetherItIsFullOfWork" label="是否全勤" width="100" />
        <el-table-column prop="actualAttendanceDaysAreOfficial" label="实际出勤天数" width="180" />
        <el-table-column prop="attendanceDay" label="应出勤工作日" width="120" />
        <el-table-column prop="salaryStandard" label="计薪标准" width="100" />
        <el-table-column prop="officialSalaryDays" label="计薪天数" width="150" />
      </el-table>
    </el-row>

    <!-- 按钮区 -->
    <el-row type="flex" justify="center" class="btn">
      <el-tooltip class="item" effect="dark" content="将当前报表存放至归档，归档可以多次，但只保留最后一次" placement="top-start">
        <el-button type="primary" size="middle" @click="archivingReportForm">归档月份报表</el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="开始做下月考勤" placement="top-start">
        <el-button type="primary" size="middle" @click="createReportForm">新建报表</el-button>
      </el-tooltip>
    </el-row>
  </div>
</template>

<script>
import { archives, newReports, reportFormList } from '@/api/attendances'

export default {
  data() {
    return {
      dataList: [],
      seleList: [],
      text: '', // 新增、编辑文本
      tableKey: 0,
      counts: '',
      barSearch: {
        alertText: ''
      },
      requestParameters: {
        atteDate: ''
      },
      isArchived: '',
      loading: false,
      centerDialogVisible: false,
      infoTip: '',
      month: this.$route.params.month
    }
  },
  computed: {
    // 模糊搜索
    list() {
      const search = this.requestParameters.keyword
      if (search) {
        return this.dataList.filter(data => {
          return Object.keys(data).some(key => {
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(search) > -1
            )
          })
        })
      }
      return this.dataList
    }
  },
  created() {
    this.requestParameters.atteDate = this.yearMonth
    this.reportFormList()
  },
  methods: {
    async  reportFormList(params) {
      this.loading = true
      this.dataList = await reportFormList(this.requestParameters)
      this.loading = false
    },
    // 新增用户刷新列表
    handleLoadDataList() {
      this.reportFormList()
    },
    // 报表历史归档
    archivingReportForm() {
      var departmentId = this.requestParameters.departmentId
      var atteDate = {
        departmentId: departmentId,
        atteDate: this.month
      }
      this.$confirm(
        '该月报表已归档过，重新归档将覆盖上一份报表，您确认要再次归档吗？',
        '归档' + this.month + '报表'
      )
        .then(async() => {
          await archives(atteDate)
          this.$message.success('归档成功')
        })
    },

    // 新建历史归档表单
    createReportForm() {
      this.$confirm(
        '新建报表会使得' +
          this.month +
          '月报表不能修改，且您上一次归档之后的修改将不会被保存。您确定现在就开始做下月考勤吗？',
        '新建' + parseInt(Number(this.month) + Number(1)) + '报表'
      )
        .then(async() => {
          // const nextMonth = this.getNextMonth(this.yearMonth)
          var atteTime = this.month.substring(0, 4) + '-' + this.month.substring(4)
          atteTime = this.getNextMonth(atteTime).datas.replace('-', '')
          this.requestParameters.yearMonth = atteTime
          await newReports(this.requestParameters)
          this.$message.success('新建报表成功！')
          this.$router.push('/attendances')
        })
    },

    // 获取下一个月
    getNextMonth: function(date) {
      var arr = date.split('-')
      var year = arr[0] // 获取当前日期的年份
      var month = arr[1] // 获取当前日期的月份
      var year2 = year
      var month2 = parseInt(month) + 1
      if (month2 === 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }

      if (month2 < 10) {
        month2 = '0' + month2
      }

      var datas = year2 + '-' + month2
      var months = month2
      return {
        datas: datas,
        months: months
      }
    },
    // 每页显示信息条数
    handleSizeChange(pageSize) {
      this.requestParameters.pagesize = pageSize
      if (this.requestParameters.page === 1) {
        this.reportFormList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.requestParameters.page = val
      this.reportFormList()
    },
    // 报表下载
    handelFileDownload() {
      try {
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['姓名', '工号', '手机号', '部门', '事假', '调休', '正常', '迟到次数', '早退次数', '日均时长', '旷工天数', '是否全勤', '实际出勤天数', '应出勤工作日', '计薪标准', '计薪天数'] // 表头 必填

          const filterVal = ['name', 'workNumber', 'mobile', 'department', 'leaveDays', 'dayOffLeaveDays', 'normalDays', 'laterTimes', 'earlyTimes', 'averageDailyNaturalDays', 'absenceDays', 'whetherItIsFullOfWork', 'actualAttendanceDaysAreOfficial', 'attendanceDay', 'salaryStandard', 'officialSalaryDays']
          const data = this.formatJson(filterVal, this.dataList)
          excel.export_json_to_excel({
            header: tHeader,
            data: data,
            filename: '人事报表',
            autoWidth: true,
            bookType: 'xlsx'
          })
          this.$message.success('导出报表成功！')
        })
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 表单格式校对
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

  }
}
</script>

<style lang="scss" scoped>
.btn{
  margin-top: 10px;
}
</style>
